@import "../../_common_sass/base";

.activity {
    background-color: $body-background;
    .activity-list {
        padding-top: px2rem($headerHeight + 30px);
        li {
            margin-bottom: .24rem;
            background-color: #fff;
            padding-left: .32rem;
            border-top: 1px solid $light-border-color;
            border-bottom: 1px solid $light-border-color;
            .act-body {
                display: block;
                padding: .32rem 0;

                @extend .clearfix;
                img {
                    float: left;
                    width: px2rem(212px);
                    height: px2rem(148px);
                }
                .text {
                    float: left;
                    margin-left: 0.32rem;
                    width: 4.5rem;
                    h5 {
                        @extend .line-ellipsis;
                        color: $text-color-3;
                        font-size: px2rem(32px);
                    }
                    p {
                        color: $text-color-9;
                        height: px2rem(60px);
                        line-height: px2rem(30px);
                        &.address {
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                            line-height: px2rem(35px);
                            &:before {
                                content: '';
                                display: inline-block;
                                width: px2rem(18px);
                                height: px2rem(24px);
                                margin: 0 px2rem(13px) 0 px2rem(3px);
                                background-image: url(../../../containers/_common_img/my-icon/local-icon.png);
                                background-size: cover;
                                background-repeat: no-repeat;
                                vertical-align: middle;
                            }
                        }
                        &.time {
                            &:before {
                                content: '';
                                display: inline-block;
                                width: px2rem(24px);
                                height: px2rem(24px);
                                margin: 0 px2rem(10px) 0 0;
                                background-image: url(../../../containers/_common_img/my-icon/time-icon.png);
                                background-size: cover;
                                background-repeat: no-repeat;
                                vertical-align: middle;
                            }
                        }
                    }
                    .status {
                        float: left;
                        @include label($height: 36px, $o: 4px);
                        font-size: px2rem(20px);
                        &.style101 {
                            background-color: $red;
                        }
                        &.style102 {
                            background-color: $blue;
                        }
                        &.style103,
                        &.style104 {
                            background-color: #ccc;
                        }
                    }
                }

            }
            .act-footer {
                display: block;
                height: px2rem(88px);
                border-top: 1px solid $light-border-color;
                & > div {
                    float: left;
                }
                .avatar-box {
                    margin-top: px2rem(12px);
                }
                .master-name {
                    line-height: px2rem(88px);
                }
                .price-box {
                    float: right;
                    margin-right: px2rem(30px);
                    line-height: px2rem(88px);

                }
            }
        }
    }
}